DOM কালেকশন হলো DOM এর মধ্যে এক বা একাধিক এলিমেন্টের গ্রুপ বা সংগ্রহ। এটি এমন একটি অবজেক্ট যা DOM থেকে নির্বাচিত একাধিক এলিমেন্ট ধারণ করে এবং এগুলোর উপর ক্রিয়াকলাপ করতে সহায়ক। ডোম কালেকশন সাধারণত একটি লাইভ বা নন-লাইভ অবজেক্ট হতে পারে, এবং এটি মেথড বা প্রোপার্টি ব্যবহার করে একটি একক এলিমেন্ট বা একাধিক এলিমেন্টে অ্যাক্সেস করতে সাহায্য করে।
DOM কালেকশনের ধরন
লাইভ কালেকশন (Live Collection)
লাইভ কালেকশন এমন একটি কালেকশন, যা ডকুমেন্টে করা যে কোনো পরিবর্তন স্বয়ংক্রিয়ভাবে আপডেট করে। অর্থাৎ, যদি DOM এ নতুন এলিমেন্ট যোগ বা মুছে ফেলা হয়, তাহলে এই কালেকশন আপডেট হয়ে যাবে।
উদাহরণ: getElementsByTagName এবং getElementsByClassName মেথডগুলি লাইভ কালেকশন রিটার্ন করে।
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // বর্তমান প্যারাগ্রাফ সংখ্যা
যদি ডকুমেন্টে একটি নতুন <p> এলিমেন্ট যোগ করা হয়, তাহলে paragraphs কালেকশন আপডেট হয়ে যাবে এবং তার length বাড়িয়ে দিবে।
নন-লাইভ কালেকশন (Non-Live Collection)
নন-লাইভ কালেকশন এমন একটি কালেকশন, যা ডকুমেন্টে কোনো পরিবর্তন হলে আপডেট হয় না। এটি শুধুমাত্র সেই সময়ে নির্বাচিত এলিমেন্টগুলির একটি স্থির কপি রিটার্ন করে।
উদাহরণ: querySelectorAll মেথড একটি নন-লাইভ কালেকশন রিটার্ন করে।
const paragraphs = document.querySelectorAll('p');
console.log(paragraphs.length); // শুধুমাত্র বর্তমানে পেজে থাকা প্যারাগ্রাফের সংখ্যা
যদি ডকুমেন্টে নতুন <p> এলিমেন্ট যোগ করা হয়, তাহলে paragraphs কালেকশন আপডেট হবে না।
DOM কালেকশন অ্যাক্সেস
ডোম কালেকশনের এলিমেন্টগুলি সাধারণত সূচক ব্যবহার করে অ্যাক্সেস করা হয়। যদিও লাইভ কালেকশনে আপনাকে পরিবর্তন দেখতে পাবে, নন-লাইভ কালেকশনে এটি সম্ভব নয়।
লাইভ কালেকশনের অ্যাক্সেস
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs[0].textContent); // প্রথম প্যারাগ্রাফের টেক্সট দেখানো
নন-লাইভ কালেকশনের অ্যাক্সেস
const paragraphs = document.querySelectorAll('p');
console.log(paragraphs[0].textContent); // প্রথম প্যারাগ্রাফের টেক্সট দেখানো
DOM কালেকশনের মেথড
getElementsByTagName
এই মেথডটি ডকুমেন্টের মধ্যে একটি নির্দিষ্ট ট্যাগ নামের সব এলিমেন্ট নির্বাচন করে। এটি একটি লাইভ কালেকশন রিটার্ন করে।
const divs = document.getElementsByTagName('div');
console.log(divs.length); // div এলিমেন্টের সংখ্যা
getElementsByClassName
এই মেথডটি ডকুমেন্টের মধ্যে একটি নির্দিষ্ট ক্লাস নামের সব এলিমেন্ট নির্বাচন করে। এটি একটি লাইভ কালেকশন রিটার্ন করে।
const items = document.getElementsByClassName('item');
console.log(items.length); // 'item' ক্লাসের এলিমেন্টের সংখ্যা
querySelectorAll
এই মেথডটি CSS সিলেক্টরের মাধ্যমে একাধিক এলিমেন্ট নির্বাচন করে এবং একটি নন-লাইভ কালেকশন রিটার্ন করে।
const items = document.querySelectorAll('.item');
console.log(items.length); // '.item' ক্লাসের সব এলিমেন্টের সংখ্যা
childNodes
এটি একটি এলিমেন্টের সমস্ত চাইল্ড নোডের একটি কালেকশন রিটার্ন করে, যা লাইভ কালেকশন হতে পারে। এটি একটি টেক্সট, কমেন্ট, বা অন্য এলিমেন্টও হতে পারে।
const parentElement = document.getElementById('parent');
const childNodes = parentElement.childNodes;
console.log(childNodes.length); // চাইল্ড নোডগুলির সংখ্যা
children
এটি একটি এলিমেন্টের শুধুমাত্র চাইল্ড এলিমেন্টের কালেকশন রিটার্ন করে, অর্থাৎ শুধুমাত্র HTML এলিমেন্টগুলিই এখানে থাকবে।
const parentElement = document.getElementById('parent');
const children = parentElement.children;
console.log(children.length); // চাইল্ড এলিমেন্টগুলির সংখ্যা
DOM কালেকশন এবং Array
DOM কালেকশন একটি লাইভ বা নন-লাইভ অ্যারের মতো দেখতে হলেও, এটি একেবারে সাধারণ অ্যারে নয়। তবে, এটি forEach এবং অন্যান্য মেথড ব্যবহার করে ইটারেট করা যায়, কিন্তু কিছু কালেকশন আউটপুটের সাথে অ্যারের মতো আচরণ না করলেও, আপনি এটিকে একটি অ্যারেতে রূপান্তর করতে পারেন।
const divs = document.getElementsByTagName('div');
const divsArray = Array.from(divs);
divsArray.forEach(div => {
console.log(div.textContent);
});
এখানে, Array.from() ব্যবহার করে divs লাইভ কালেকশনকে একটি অ্যারেতে রূপান্তর করা হয়েছে, যাতে অ্যারে মেথড ব্যবহার করা যেতে পারে।
উদাহরণ: DOM কালেকশন ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Collection Example</title>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<script>
// getElementsByClassName ব্যবহার করা
const items = document.getElementsByClassName('item');
console.log(items.length); // আউটপুট: 3
// querySelectorAll ব্যবহার করা
const allItems = document.querySelectorAll('.item');
allItems.forEach(item => {
console.log(item.textContent); // আউটপুট: Item 1, Item 2, Item 3
});
// childNodes এবং children ব্যবহার করা
const parentElement = document.body;
const childNodes = parentElement.childNodes;
console.log(childNodes.length); // চাইল্ড নোডের সংখ্যা
const children = parentElement.children;
console.log(children.length); // চাইল্ড এলিমেন্টের সংখ্যা
</script>
</body>
</html>
এখানে, DOM কালেকশন ব্যবহার করে বিভিন্ন ট্যাগ বা ক্লাসের এলিমেন্ট নির্বাচন এবং তাদের উপর ক্রিয়াকলাপ করা হয়েছে।
সারাংশ
DOM কালেকশন হলো DOM থেকে নির্বাচিত এক বা একাধিক এলিমেন্টের একটি সংগ্রহ, যা লাইভ বা নন-লাইভ হতে পারে। লাইভ কালেকশন ডকুমেন্টে পরিবর্তন হওয়ার সাথে সাথে আপডেট হয়, কিন্তু নন-লাইভ কালেকশন তা নয়। getElementsByTagName, getElementsByClassName, querySelectorAll ইত্যাদি মেথডগুলি DOM কালেকশন তৈরি করতে ব্যবহৃত হয়, এবং এগুলি ইটারেট এবং ম্যানিপুলেট করা যায়। DOM কালেকশনকে অ্যারেতে রূপান্তর করা সম্ভব, যা ডেভেলপারদের আরও কার্যকরভাবে এটি ব্যবহার করতে সহায়ক।
Read more
